<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/data-retrieval/index'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>关联数据({{ title }})</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search-column class="fixed-column">
            <page-search-item>
                <p class="title">{{ title }}</p>
            </page-search-item>
            <page-search-item class="right">
                <el-button type="primary" @click="goBlack()">返回</el-button>
            </page-search-item>
        </page-search-column>
        <div class="layout">
            <div class="container">
                <div
                    class="content"
                    v-if="tableData.length > 0"
                    style="height: 100%"
                >
                    <div class="download">
                        <div @click="dialogExport = true" class="btn">
                            <i class="el-icon-download"></i>
                            <span>导出当前搜索结果</span>
                        </div>
                        <el-button
                            size="small"
                            type="primary"
                            @click="handleSelectTableTitle"
                            >更多展示项</el-button
                        >
                    </div>
                    <el-table
                        :data="tableData"
                        ref="multipleTable"
                        class="pbb__table"
                        header-cell-class-name="pbb__table-thead"
                        cell-class-name="pbb__table-thead-cell"
                        row-class-name="pbb__table-thead-row"
                        row-key="id"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column
                            align="center"
                            type="selection"
                            :reserve-selection="true"
                            width="50"
                        >
                        </el-table-column>
                        <el-table-column
                            label="序号"
                            align="center"
                            type="index"
                            :index="indexMethod"
                            width="80"
                        >
                        </el-table-column>
                        <el-table-column
                            label="采集日期"
                            prop="create_time"
                            min-width="120"
                            fit
                        >
                            <template slot-scope="scope">
                                {{ scope.row.create_time.substring(0, 10) }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="采集区域"
                            prop="city_code"
                            min-width="120"
                            fit
                        ></el-table-column>
                        <el-table-column
                            label="采集人"
                            prop="collector"
                            min-width="120"
                            fit
                        ></el-table-column>
                        <el-table-column
                            v-for="item in tableColumn"
                            :key="item.fieldName"
                            :prop="item.field"
                            :label="item.fieldName"
                            :show-overflow-tooltip="
                                [3, 4, 6, 7, 12].includes(item.valueKindId)
                            "
                            :min-width="
                                [3, 11].includes(item.valueKindId)
                                    ? '200px'
                                    : [5, 8].includes(item.valueKindId)
                                    ? '140px'
                                    : item.fieldName.length * 16 + 20 > 140
                                    ? item.fieldName.length * 16 + 20 + 'px'
                                    : '140px'
                            "
                            fit
                        >
                            <template slot-scope="scope">
                                <div v-if="item.valueKindId === '5'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-button
                                            type="primary"
                                            @click="
                                                previewImg(
                                                    scope.row[item.field].split(
                                                        ','
                                                    )
                                                )
                                            "
                                            >查看图片</el-button
                                        >
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === '8'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-button
                                            type="primary"
                                            @click="
                                                videoPlay(scope.row[item.field])
                                            "
                                            >点击播放</el-button
                                        >
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === '9'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-button
                                            type="text"
                                            @click="
                                                previewVideo(
                                                    scope.row[item.field],
                                                    'record'
                                                )
                                            "
                                        >
                                            播放
                                        </el-button>
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === '10'">
                                    <div
                                        v-if="
                                            scope.row[item.field] &&
                                                scope.row[item.field].length
                                        "
                                    >
                                        <el-link
                                            class="table-file"
                                            v-for="(it, idx) in scope.row[
                                                item.field
                                            ]"
                                            :key="idx"
                                            type="primary"
                                            :href="$staticUrl + '/' + it"
                                            target="_blank"
                                        >
                                            文件{{ idx + 1 }}
                                        </el-link>
                                    </div>
                                </div>
                                <span
                                    v-else
                                    class="other-span"
                                    :title="scope.row[item.field]"
                                >
                                    {{ scope.row[item.field] }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            align="center"
                            width="100"
                            label="操作"
                        >
                            <template slot-scope="scope">
                                <div class="btn-area">
                                    <el-tooltip
                                        v-if="scope.row.attachFlag"
                                        class="item"
                                        effect="dark"
                                        content="附件"
                                        placement="top"
                                    >
                                        <i class="el-icon-paperclip"></i>
                                    </el-tooltip>
                                    <el-button
                                        type="text"
                                        size="small"
                                        @click="goToDetails(scope.row)"
                                        >详情
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="page-base-footer">
                        <div class="page-base-footer__right">
                            <div class="num-box">
                                已选<span>{{ multipleSelection.length }}</span
                                >条
                            </div>
                            <el-divider direction="vertical"></el-divider>
                            <el-button
                                :disabled="multipleSelection.length === 0"
                                type="primary"
                                @click="handleExprotAnnex"
                                >导出附件</el-button
                            >
                        </div>
                        <pagination
                            :total="total"
                            :page.sync="currentPage"
                            :limit.sync="pageSize"
                            @pagination="getTable"
                        />
                    </div>
                </div>
                <ask-empty-text
                    v-else
                    style="background: #fff"
                ></ask-empty-text>
            </div>
        </div>
        <el-dialog
            title="自定义表格展示项"
            :visible.sync="tableVisible"
            width="40%"
            center
            :before-close="handleClose"
            class="tree-dialog"
        >
            <div class="tree-box">
                <div class="tree-box-left">
                    <p>请选择你需要展示的选项</p>
                    <el-tree
                        :data="newChildData"
                        show-checkbox
                        node-key="id"
                        ref="titleTree"
                        :default-checked-keys="checkKeys"
                        :default-expanded-keys="expandedKeys"
                        :props="childProps"
                        @check="CheckChange"
                    >
                    </el-tree>
                </div>
                <div class="tree-box-right">
                    <p>已选择检索结果(最多30个)</p>
                    <el-checkbox-group
                        v-model="tableTitleNameList"
                        @change="handleChange"
                    >
                        <el-checkbox
                            v-for="(item, index) in tableTitleList"
                            :key="index"
                            :label="item"
                            >{{ item.fieldName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tableVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSetTableTitleRule"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="导出"
            class="export-dialog"
            :visible.sync="dialogExport"
            width="30%"
            @close="handeleColse"
        >
            <el-form label-position="top">
                <el-form-item label="选择导出方式" class="item-fotm">
                    <el-radio-group v-model="downType">
                        <el-radio :label="1">按当前页导出</el-radio>
                        <el-radio :label="2" style="margin-left: 24px"
                            >按序号导出</el-radio
                        >
                    </el-radio-group>
                </el-form-item>
                <el-form-item
                    v-if="downType === 2"
                    required
                    class="serial-number"
                >
                    <div class="group">
                        <el-input
                            v-model.number="startNumber"
                            placeholder="请输入开始序号"
                            autocomplete="off"
                            size="small"
                        ></el-input>
                        <span>至</span>
                        <el-input
                            v-model.number="endNumber"
                            placeholder="请输入结束序号"
                            autocomplete="off"
                            size="small"
                        ></el-input>
                    </div>
                    <font class="tips">最多支持导出2000条</font>
                </el-form-item>
                <el-form-item label="选择导出列">
                    <el-select
                        v-model="exportColumnList"
                        multiple
                        collapse-tags=""
                        placeholder="请选择(默认全部)"
                    >
                        <el-option
                            v-for="item in exprotTableCum"
                            :key="item.field"
                            :label="item.fieldName"
                            :value="item.field"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handeleColse">取 消</el-button>
                <el-button type="primary" @click="handleExport()"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="导出附件"
            :visible.sync="enclosureDialog"
            width="30%"
            class="annex-mask"
            @close="closeAnnex"
            @open="openAnnex"
        >
            <div v-if="exportAnnexList.length > 0">
                <p>目前仅支持导出前1000条数据</p>
                <div>
                    <span>选择导出附件:</span>
                    <el-checkbox-group v-model="exportCheckList">
                        <el-checkbox
                            v-for="item in exportAnnexList"
                            :key="item.id"
                            :label="item.field"
                            >{{ item.fieldName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
                <div>
                    <span>附件名称:</span>
                    <el-select
                        v-model="annexName"
                        multiple
                        :multiple-limit="3"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(item, index) in newTableColumn"
                            :key="index"
                            :value="item.field"
                            :label="item.fieldName"
                        >
                        </el-option>
                    </el-select>
                    <p>选择某一列数据内容为导出的附件命名(最多可选择三个)</p>
                </div>
            </div>
            <p v-else>选择的列表项暂无附件</p>
            <span
                slot="footer"
                v-if="exportAnnexList.length > 0"
                class="dialog-footer"
            >
                <el-button @click="closeExprot">取 消</el-button>
                <el-button
                    :disabled="exportAnnexList.length === 0"
                    type="primary"
                    @click="exportAnnex"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@core/public/preview-video-audio/index";
import { State } from "vuex-class";
import { downLoadBase64File } from "@/utils";
@Component({
    name: "DataRetrievalLinkDataNotAlive"
})
export default class DataRetrievalLinkDataNotAlive extends Vue {
    @State(state => state.authArea) authArea: any;
    // 已选择检索条件的数组
    itemList: any[] = [];

    // 检索条件的总数组
    retrieveData: any[] = [];
    // 列表头以及检索条件的数组
    childData: any[] = [];

    childProps = {
        children: "labelList",
        label: "fieldName"
    };

    // 表格的数据
    tableData: any[] = [];
    // 表格的动态表头
    tableColumn: any[] = [];
    tableVisible = false;
    // 选择导出附件的项
    multipleSelection: any[] = [];
    // 用来表示表头默认选择当前数组的前十项
    newList: any[] = [];
    // 已选择的检索条件数组
    searchList: any[] = [];
    // 已选择检索条件复选框组件绑定的值
    searchNameList: any[] = [];
    // 已选择表头展示字段复选框组件绑定的值
    tableTitleNameList: any[] = [];
    tableTitleList: any[] = [];
    // 选择的检索条件用于向后端交换数据
    searchConditionVoList: any[] = [];
    // 检索条件弹窗的显示与隐藏
    dialogVisible = false;
    // 导出附件的弹窗
    enclosureDialog = false;
    // 当前二级分类的typeId  用于查询数据
    // 人员信息
    personList: any[] = [];
    // 采集区域
    beatList: any[] = [];
    queryCurrentId = "";
    queryCurrentFiled = "";
    typeId = "";
    title = "";
    title1 = "";
    title2 = "";
    // 分页器的各项数据
    pageSize = 10;
    currentPage = 1;
    total = 0;
    // 导出表头的弹窗
    dialogExport = false;
    downType = 1;
    startNumber = "";
    endNumber = "";
    exportColumnList: any[] = [];
    exportAnnexList: any[] = [];
    exportCheckList: any[] = [];
    annexNameList: any[] = [];
    annexName: any[] = [];
    dataIds: any[] = [];

    get newChildData() {
        return JSON.parse(JSON.stringify(this.childData));
    }

    get exprotTableCum() {
        const list: any[] = [];
        this.newChildData.forEach((item: any) => {
            item.labelList.forEach((subItem: any) => {
                list.push(subItem);
            });
        });
        return list;
    }

    // 列表字段默认选择前十个
    get checkKeys() {
        const list: any[] = [];
        const nameList: any[] = [];
        this.newList.forEach((item: any) => {
            list.push(item.id);
        });
        this.newChildData.forEach((item: any) => {
            item.labelList.forEach((subItem: any) => {
                this.newList.forEach((sub: any) => {
                    if (subItem.id === sub.id) {
                        nameList.push(subItem);
                    }
                });
            });
        });
        this.tableTitleNameList = nameList;
        this.tableTitleList = nameList;
        return list;
    }

    // 导出字段树 默认展开第一个
    get expandedKeys() {
        const list: any[] = [];
        if (this.newChildData.length > 0) {
            list.push(this.newChildData[0].id);
        }
        return list;
    }

    get newTableColumn() {
        const list: any[] = this.tableColumn.filter(
            (item: any) =>
                item.valueKindId !== "2" &&
                item.valueKindId !== "4" &&
                item.valueKindId !== "5" &&
                item.valueKindId !== "8" &&
                item.valueKindId !== "9" &&
                item.valueKindId !== "10"
        );
        return list;
    }

    // 监听以选择表头长度
    @Watch("tableTitleList")
    changLen(val: any) {
        if (this.newChildData) {
            this.newChildData.forEach((item: any) => {
                item.labelList.forEach((subItem: any) => {
                    if (val.length > 29) {
                        subItem.disabled = true;
                    } else {
                        subItem.disabled = false;
                    }
                });
            });
        }
    }

    created() {
        this.getAllData();
    }

    // 当分页器的数据发生变化时
    getTable(val: any) {
        const dalist = {
            currentPage: val.page,
            pageSize: val.limit,
            searchConditionVoList: this.searchConditionVoList,
            typeId: this.typeId,
            cityCode: this.authArea.cityCode,
            dataIds: this.dataIds || []
        };
        this.getTableData(dalist);
    }

    goBlack() {
        this.$router.go(-1);
    }

    // 获取检索树形数据
    // 获取村的人员
    // 获取采集区域
    async getAllData() {
        const [res, result, response] = await Promise.all([
            this.$server["retrieval/getTree"]({ data: {} }),
            this.$server["project/ByGovernment"]({
                data: { governmentId: this.authArea.governmentId },
                loader: false
            }),
            this.$server["retrieval/byCode"]({
                data: { code: this.authArea.cityCode }
            })
        ]);
        // 获取检索树形数据
        if (res.data.code === 200) {
            this.retrieveData = res.data.data;
            // 处理树形结构的以及分类不能使用各自内部的children数组 不然组件会自动遍历 // 不满足ui展示图
            this.retrieveData = this.retrieveData
                .filter((item: any) => item.children)
                .map((item: any) => {
                    item.children.forEach((subItem: any) => {
                        // 添加两个数组 存储选择的值
                        subItem.searchList = [];
                        subItem.titleList = [];
                    });
                    // 添加一个list替换children 使属性结构满足ui页面要求
                    return { ...item, list: item.children };
                });
        }

        if (result.data.code === 200) {
            this.personList = result.data.data;
        }

        if (response.data.code === 200) {
            this.beatList = response.data.data;
        }
        this.itemList = [
            {
                field: "create_time",
                fieldName: "采集时间",
                conditionValue: "4",
                keyword1: "",
                keyword2: "",
                valueKindId: "3",
                active: true
            },
            {
                field: "city_code",
                fieldName: "采集区域",
                conditionValue: "3",
                keyword1: "",
                keyword2: "",
                valueKindId: "7",
                selects: this.beatList,
                multi: true,
                active: true
            },
            {
                field: "collector",
                fieldName: "采集人",
                conditionValue: "3",
                keyword1: "",
                keyword2: "",
                valueKindId: "7",
                selects: this.personList,
                multi: true,
                active: true
            }
        ];
        // 通过下面的全镇检索首页的资源分类进入改页面
        if (this.$route.query.typeId) {
            this.searchNameList = [];
            this.typeId = this.$route.query.typeId as string;
            this.queryCurrentId = this.typeId;
            this.queryCurrentFiled = this.$route.query.field as string;
            this.retrieveData.forEach((item: any) => {
                if (item.children) {
                    item.children.forEach((subItem: any) => {
                        if (subItem.id === this.typeId) {
                            this.title = `${item.name}/${subItem.name}`;
                            this.childData = subItem.children;
                            this.childData = this.childData.map((item: any) => {
                                return {
                                    ...item,
                                    fieldName: item.name
                                };
                            });
                            this.childData = this.childData.filter(
                                (item: any) => {
                                    if (item.labelList) {
                                        return item.labelList.length > 0;
                                    }
                                }
                            );
                            this.newList = this.childData[0].labelList.slice(
                                0,
                                10
                            );
                            this.tableColumn = this.childData[0].labelList.slice(
                                0,
                                10
                            );
                        }
                    });
                }
            });
            // this.title = this.$route.query.title;
            this.dataIds = this.$route.query.dataIds
                ? (this.$route.query.dataIds as string).split(",")
                : [];
        }
        this.handleStartSearch();
    }

    // 获取表格数据
    async getTableData(data: any) {
        const res = await this.$server["retrieval/queryData"]({
            data: data
        });
        if (res.data.code === 200) {
            if (res.data.data) {
                this.tableData = res.data.data.records;
                this.total = res.data.data.total;
            } else {
                this.tableData = [];
                this.dataIds = [];
                this.total = 0;
            }
        } else {
            this.tableData = [];
            this.total = 0;
            this.dataIds = [];
        }
    }

    //  打开选择表头弹窗
    handleSelectTableTitle() {
        this.retrieveData.forEach((item: any) => {
            item.children.forEach((subItem: any) => {
                // 通过typeId去判断时哪个分类下的检索项  从新赋值
                if (subItem.id === this.typeId) {
                    this.childData = subItem.children;
                    if (subItem.titleList.length) {
                        this.$nextTick(() => {
                            this.tableTitleNameList = subItem.titleList;
                            this.tableTitleList = subItem.titleList;
                            const titIdList = this.tableTitleNameList.map(
                                (item: any) => {
                                    return item.id;
                                }
                            );
                            (this.$refs.titleTree as any).setCheckedKeys(
                                titIdList
                            );
                        });
                    } else {
                        this.newList = this.childData[0].labelList.slice(0, 10);
                    }
                }
            });
        });
        this.childData = this.childData.map((item: any) => {
            return { ...item, fieldName: item.name };
        });
        this.childData = this.childData.filter((item: any) => {
            if (item.labelList) {
                return item.labelList.length > 0;
            }
        });
        this.tableVisible = true;
    }

    // 关闭检索条件弹窗
    handleClose(done: any) {
        done();
    }

    // 动态计算表格的索引值
    indexMethod(index: any) {
        return index + 1 + (this.currentPage - 1) * this.pageSize;
    }

    // 列表字段复选框点击时触发
    CheckChange(data: any, node: any) {
        const checkedNodesList = node.checkedNodes.filter((item: any) => {
            return !item.parentId;
        });
        this.tableTitleList = checkedNodesList;
        this.tableTitleNameList = checkedNodesList;
    }

    // 已选择的表头字段复选框点击时触发
    handleChange(val: any) {
        const list: any[] = [];
        const arrlist: any[] = [];
        val.forEach((item: any) => {
            list.push(item.id);
            arrlist.push(item);
        });
        this.tableTitleList = arrlist;
        (this.$refs.titleTree as any).setCheckedKeys(list);
    }

    // 选择表头
    handleSetTableTitleRule() {
        this.tableColumn = this.tableTitleNameList;
        this.tableVisible = false;
        this.retrieveData.forEach((item: any) => {
            item.children.forEach((subItem: any) => {
                if (subItem.id === this.typeId) {
                    subItem.titleList = this.tableTitleNameList;
                }
            });
        });
    }

    // 开始检索
    handleStartSearch() {
        let val = "";
        this.itemList = this.itemList.filter((item: any) => {
            return (item = item.active);
        });
        this.searchConditionVoList = this.itemList.map((item: any) => {
            if (item.keyword1 instanceof Array) {
                val = item.keyword1.toString().replace(/,/g, "###");
            } else {
                if (item.keyword2) {
                    val = `${item.keyword1}###${item.keyword2}`;
                } else {
                    val = `${item.keyword1}`;
                }
            }
            return {
                field: item.field,
                term: item.conditionValue,
                value: val
            };
        });
        this.currentPage = 1;
        this.pageSize = 10;
        const datalist = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchConditionVoList: this.searchConditionVoList,
            typeId: this.typeId,
            cityCode: this.authArea.cityCode,
            dataIds: this.dataIds || []
        };
        this.getTableData(datalist);
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
    }

    // 选择导出的数据
    handleSelectionChange(val: any) {
        this.multipleSelection = val;
    }

    // 打开导出附件弹窗
    handleExprotAnnex() {
        if (this.multipleSelection.length > 0) {
            this.enclosureDialog = true;
            this.tableColumn.map((item: any) => {
                if (["5", "8", "9", "10"].includes(item.valueKindId)) {
                    this.exportAnnexList.push(item);
                }
            });
        } else {
            return this.$message.error("请选择需要导出的附件的数据");
        }
    }

    // 关闭导出附件弹窗
    closeExprot() {
        this.enclosureDialog = false;
    }

    closeAnnex() {
        this.exportAnnexList = [];
        this.exportCheckList = [];
        this.annexName = [];
        this.$store.dispatch("changeText", "");
    }

    openAnnex() {
        this.$store.dispatch("changeText", "附件正在下载中...");
    }

    async exportAnnex() {
        const dataIds: any[] = this.multipleSelection.map((item: any) => {
            return item.id;
        });
        if (this.exportCheckList.length === 0) {
            return this.$message.error("请选择需要导出的附件");
        }
        if (this.annexName.length === 0) {
            return this.$message.error("请给导出的附件命名");
        }
        const res = await this.$server["retrieval/fileCompressExport"]({
            data: {
                dataIds,
                expColumnList: this.exportCheckList,
                folderNameColumns: this.annexName,
                field: this.queryCurrentFiled
            },
            responseType: "blob"
        });
        this.enclosureDialog = false;
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", `${this.title}检索结果附件.zip`);
        document.body.appendChild(link);
        link.click();
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
        document.body.removeChild(link);
        this.$message.success("下载成功");
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => this.$staticUrl + "/" + item);
        dialogPreviewImg({ title: "预览图片", current: list });
    }

    videoPlay(url: any) {
        dialogPreviewVideoAudio({
            sourceUrl: /^http/g.test(url) ? url : this.$staticUrl + "/" + url
        });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: this.$staticUrl + "/" + file
        });
    }

    // 去详情页面
    goToDetails(item: any) {
        this.$router.push({
            name: "DataRetrievalDetails",
            query: {
                currentId: this.queryCurrentId,
                currentFiled: this.queryCurrentFiled,
                id: item.id,
                title: this.title
            }
        });
    }

    // 导出动态表格
    async handleExport() {
        const newList: any[] = [];
        const reg = new RegExp(/^([1-9]\d*|[0]{1,1})$/);
        if (this.exportColumnList.length) {
            this.exprotTableCum.forEach((item: any) => {
                this.exportColumnList.forEach((subItem: any) => {
                    if (item.field === subItem) {
                        newList.push({
                            column: item.field,
                            columnName: item.fieldName,
                            valueKindId: item.valueKindId
                        });
                    }
                });
            });
        } else {
            this.exprotTableCum.forEach((item: any) => {
                newList.push({
                    column: item.field,
                    columnName: item.fieldName,
                    valueKindId: item.valueKindId
                });
            });
        }
        if (this.downType === 2) {
            if (this.startNumber === "") {
                return this.$message.error("请输入开始序号");
            } else {
                if (Number(this.startNumber) === 0) {
                    return this.$message.error("开始序号不能为0");
                }
                if (!reg.test(this.startNumber)) {
                    return this.$message.error("开始序号须为正整数");
                }
            }
            if (this.endNumber === "") {
                return this.$message.error("请输入结束序号");
            } else {
                if (Number(this.endNumber) === 0) {
                    return this.$message.error("结束序号不能为0");
                }
                if (!reg.test(this.endNumber)) {
                    return this.$message.error("开始序号须为正整数");
                }
            }
            if (reg.test(this.startNumber) && reg.test(this.endNumber)) {
                const num = Number(this.endNumber) - Number(this.startNumber);
                if (num > 1999) {
                    return this.$message.error(
                        "一次最多只能导出2000条数据，请您分批次导出"
                    );
                }
            }
        }
        const res = await this.$server["retrieval/newExport"]({
            data: {
                downType: this.downType,
                expColumnList: newList,
                searchConditionVoList: this.searchConditionVoList,
                typeId: this.typeId,
                currentPage:
                    this.downType === 1 ? this.currentPage : this.startNumber,
                pageSize: this.downType === 1 ? this.pageSize : this.endNumber,
                cityCode: this.authArea.cityCode
            },
            responseType: "blob"
        });
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", `${this.title}检索结果.xlsx`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.handeleColse();
    }

    handeleColse() {
        this.dialogExport = false;
        this.downType = 1;
        this.startNumber = "";
        this.endNumber = "";
        this.exportColumnList = [];
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: transparent !important;
        height: calc(100% - 50px) !important;
        overflow: hidden !important;
        .pbb__search-column {
            .pbb__search-group {
                height: 100%;
                display: flex;
                align-items: center;
            }
            p {
                margin: 0;
            }
        }
    }
    .page-base-footer {
        width: 100%;
        min-width: unset !important;
        .page-base-footer__right {
            margin-top: 12px;
        }
    }
    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
        display: none;
    }

    .el-dialog__footer .dialog-footer {
        button + button {
            margin-left: 10px !important;
        }
    }

    .el-table {
        height: calc(100% - 170px);
        .el-table__body-wrapper {
            overflow-y: auto;
            overflow-y: overlay;
        }
        table {
            width: 100% !important;
        }
        .btn-area {
            position: relative;
            i {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 18px;
            }
        }
    }
}

button {
    outline: none;
}

.layout {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    &-right {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        .content-box {
            height: 100%;
        }
    }
}

.container {
    width: 100%;
    height: 100%;
    .content {
        .download {
            padding: 0 18px 0 6px;
            @include flexLayout(flex, justify, center);
            background-color: #fff;
            .btn {
                cursor: pointer;
                color: #2c82c9;
                font-weight: 500;
                padding: 10px;
                i {
                    font-size: 18px;
                }
                span {
                    font-size: 14px;
                }
            }
        }
    }
}

.tree-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 20px;
        }
        .dialog-footer {
            .el-button {
                padding: 10px 60px;
                & + .el-button {
                    margin-left: 60px;
                }
            }
        }
    }
    .tree-box {
        height: 600px;
        display: flex;
        justify-content: space-between;
        &-left {
            width: 40%;
            height: 100%;
            .el-tree {
                border: 1px solid #edeff2;
                padding: 10px 12px;
                margin-top: 12px;
                max-height: 500px;
                overflow-y: auto;
            }
        }
        &-right {
            width: 40%;
            height: 100%;
            .el-checkbox-group {
                padding: 10px 12px;
                max-height: 500px;
                overflow-y: auto;
                margin-top: 12px;
                display: flex;
                flex-direction: column;
            }
        }
    }
}

.annex-mask {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__body {
            padding: 10px 14px;
            p {
                margin: 0;
                line-height: 28px;
                color: #ccc;
            }

            & > div > div {
                display: flex;
                flex-direction: column;
                & > span {
                    margin-bottom: 10px;
                }
                & + div {
                    margin-top: 24px;
                }
            }

            .el-checkbox-group {
                .el-checkbox {
                    margin-right: 30px !important;
                }
            }
        }
    }
}
.export-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .item-fotm {
            margin-bottom: 10px;
        }
        .el-form-item__label {
            padding-bottom: 0;
            line-height: 32px;
        }
        .el-form-item__content {
            line-height: 32px;
            .el-select {
                width: 100%;
            }
        }
        .serial-number {
            .group {
                display: flex;
                span {
                    margin: 0 10px;
                }
            }
        }
        .tips {
            font-size: 12px;
            color: #ccc;
        }
    }
}

.table-img {
    width: 120px;
    height: 80px;
    cursor: pointer;
    object-fit: contain;
    background-color: #ccc;
}

.table-file {
    margin-right: 12px;
}

.address-text {
    @include textEllipsis();
}
</style>
